<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>自助接单(司机接人)</title>
		<!--标准mui.css，公共样式-->
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<!--定义样式-->
		<link rel="stylesheet" type="text/css" href="../css/self_help_order.css" />
		<link rel="stylesheet" type="text/css" href="../css/order.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left color6"></a>
			<h1 class="mui-title color6">
				<div class="mui-input-row">
				    <input type="search" placeholder="老司机代驾">
					<a class="iconfont mui-icon icon-shuaxin" id="refresh"></a>
				</div>
			</h1>
		</header>
		<div class="mui-content">
			<div class="mui-text-center p_tb20">
				<h4 class="p_tb10">司机正在赶来接您</h4>	
			</div>
			<div class="p_tb11_lr15 bg_white b_r8 m_lr15px">
				<div class="mui-clearfix p_tb10 pos_re m_b10 customer_info" >
					<a class="mui-pull-left">
						<!--<p class="user_pic b1 circle60"></p>--><!--没有图片的时候显示-->
						<img src="../public/images/user2.jpg" class="circle60 b1"/>
					</a>
					<div class="mui-pull-left p_l10">
						<div class='store-star'>
							<span>赵师傅</span>
							<div class='star-outer'>
								<div class='star-inner' data-level='4'></div>
							</div>
						</div>	
						<p class="color3 m_t16">手机号：<span id="phone_num">12345678900</span></p>
					</div>
					<button id="call_btn">
						<a class="colorP" href="tel:12345678900">
							<i class="iconfont mui-icon font36 icon-service-phone"></i>
						</a>
					</button>
				</div>
	        	<ul class="p_tb16 mui-clearfix mui-text-center">
	        		<h4>距离您<span class="color_orange">256米</span></h4>
	        	</ul>
			</div>
	        <a href="self_help_order.html" id="cancel_btn" class="mui-pull-right p_tb11_lr30 colorP">取消订单</a>
		</div>
	</body>
	<!-- Mui core JavaScript-->
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/appconfig.js"></script>
	<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
	<script src="../js/public.js"></script>
	<script type="text/javascript">
		tool.calculateStarWidth(); //计算等级星星的宽度
		
		document.addEventListener( "plusready", onPlusReady, false );
		// 扩展API加载完毕，现在可以正常调用扩展API
		function onPlusReady() {
			plus.geolocation.getCurrentPosition( function ( p ) {
				$('#initial_position').val(p.address.poiName);
			}, function ( e ) {
			//	alert( "Geolocation error: " + e.message );
			} );
		}
		//判断起始位置是否有值
		$('#initial_position').on('blur',function(){
			if($(this).val() == ""){
				mui.toast('请输入起始位置');return;
			} else {
				//判断起始位置和电话号码都没有值
				if($('#initial_position').val() !="" && $('#phone_num').val()!=""){
					$('#call_driver').attr('disabled',false);
				}
			}
		})
		
		//判断电话号码格式和
		$('#phone_num').on('blur',function(){
			if($(this).val() == ""){
				mui.toast('请输入电话号码');return;
			}else{
				if(!phone_num.test($(this).val())){
					mui.toast('请输入正确的手机号');return;
				} else {
					if($('#initial_position').val() !="" && $('#phone_num').val()!=""){
						$('#call_driver').attr('disabled',false);
					}
				}
			}
		})
		//呼叫司机
		$('#call_driver').on('tap',function(){
			plus.device.dial($('#phone_num').val(),true);
		})
	</script>
</html>